<div>
    <h5>Policies</h5>
    <hr />
    <div class="row">
        <div class="col-md-4">
            <h6>Load a policy</h6>
            <form class="input-group input-group-sm mb-1 mt-1 has-validation" role="group" autocomplete="off">
                <label class="input-group-text">Policy Id</label>
                <input autocomplete="false" name="hidden" type="text" style="display:none;">
                <input type="search" class="form-control form-control-sm" id="inputPolicyId"></input>
                <button id="buttonLoadPolicy" class="btn btn-outline-primary btn-sm"
                    title="Load policy with the given ID">
                    Load
                </button>
                <div class="invalid-feedback"></div>
            </form>
            <h6>Recent policies</h6>
            <div class="table-wrap" style="height: 35vh;">
                <table class="table table-striped table-hover table-sm">
                    <tbody id="tbodyRecentPolicies"></tbody>
                </table>
            </div>
            <h6>Who am I</h6>
            <div class="table-wrap" style="height: 35vh;">
                <table class="table table-striped table-hover table-sm">
                    <tbody id="tbodyWhoami"></tbody>
                </table>
            </div>
        </div>
        <div class="col-md-8">
            <div class="resizable_flex_column">
                <ul class="nav nav-tabs nav-fill">
                    <li class="nav-item">
                        <a class="nav-link active" data-bs-toggle="tab" data-bs-target="#tabPolicyEntries">Entries</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-bs-toggle="tab" data-bs-target="#tabPolicyImports">Imports</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-bs-toggle="tab" data-bs-target="#tabPolicyJson">JSON</a>
                    </li>
                </ul>
                <div class="tab-content" style="flex-grow: 1; overflow: hidden;">
                    <div class="tab-pane container active no-margin" id="tabPolicyEntries">
                        <h5>Policy Entries</h5>
                        <hr />
                        <div class="row resizable_pane" style="height: 22vh;">
                            <div class="col-md-6 resizable_flex_column">
                                <div class="input-group has-validation">
                                    <input class="form-control" id="tableValidationEntries" hidden="true"></input>
                                    <div class="invalid-feedback"></div>
                                </div>
                                <div class="table-wrap">
                                    <table class="table table-striped table-hover table-sm">
                                        <tbody id="tbodyPolicyEntries"></tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="col-md-6 resizable_flex_column">
                                <crud-toolbar label="Entry" id="crudEntry">
                                    <div class="input-group input-group-sm mb-1">
                                        <label class="input-group-text">Importable</label>
                                        <select class="form-select form-select-sm" id="selectImportable" disabled>
                                            <option selected value="implicit">implicit</option>
                                            <option value="explicit">explicit</option>
                                            <option value="never">never</option>
                                        </select>
                                    </div>    
                                </crud-toolbar>
                            </div>
                        </div>                
                        <h6>Subjects</h6>
                        <div class="row resizable_pane" style="height: 22vh;">
                            <div class="col-md-6 resizable_flex_column">
                                <div class="input-group has-validation">
                                    <input class="form-control" id="tableValidationSubjects" hidden="true"></input>
                                    <div class="invalid-feedback"></div>
                                </div>
                                <div class="table-wrap">
                                    <table class="table table-striped table-hover table-sm">
                                        <tbody id="tbodyPolicySubjects"></tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="col-md-6 resizable_flex_column">
                                <crud-toolbar label="Subject" id="crudSubject" style="flex-grow: 1;">
                                    <div class="ace_container" style="flex-grow: 1;">
                                        <div class="script_editor" id="subjectEditor"></div>
                                    </div>        
                                </crud-toolbar>
                            </div>
                            <!-- <div class="row flex_column_part">
                            </div> -->
                        </div>
                        <h6>Resources</h6>
                        <div class="row resizable_pane" style="height: 22vh;">
                            <div class="col-md-6 resizable_flex_column">
                                <div class="input-group has-validation">
                                    <input class="form-control" id="tableValidationResources" hidden="true"></input>
                                    <div class="invalid-feedback"></div>
                                </div>
                                <div class="table-wrap">
                                    <table class="table table-striped table-hover table-sm">
                                        <tbody id="tbodyPolicyResources"></tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="col-md-6 resizable_flex_column">
                                <crud-toolbar label="Resource" id="crudResource" style="flex-grow: 1;">
                                    <div class="input-group input-group-sm mb-1">
                                        <label class="input-group-text">Template</label>
                                        <select class="form-select form-select-sm" id="selectResourceTemplates" disabled></select>
                                    </div>
                                    <div class="ace_container" style="flex-grow: 1;">
                                        <div class="script_editor" id="resourceEditor"></div>
                                    </div>        
                                </crud-toolbar>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-content" style="flex-grow: 1; overflow: hidden;">
                    <div class="tab-pane container no-margin" id="tabPolicyImports">
                        <h5>Policy Imports</h5>
                        <hr />
                        <div class="row resizable_pane" style="height: 75vh;">
                            <div class="col-md-6 resizable_flex_column">
                                <div class="table-wrap">
                                    <table class="table table-striped table-hover table-sm">
                                        <tbody id="tbodyPolicyImports"></tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="col-md-6 resizable_flex_column">
                                <crud-toolbar label="Imported Policy Id" id="crudImport" style="flex-grow: 1;">
                                    <div class="table-wrap">
                                        <table class="table table-striped table-hover table-sm">
                                            <tbody id="tbodyPolicyImportEntries"></tbody>
                                        </table>
                                    </div>
                                </crud-toolbar>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-content" style="flex-grow: 1; overflow: hidden; height: 80vh;">
                    <div class="tab-pane container no-margin" id="tabPolicyJson">
                        <crud-toolbar label="PolicyId" id="crudPolicyJson">
                            <div class="input-group input-group-sm mb-1">
                                <label class="input-group-text">Template</label>
                                <select class="form-select form-select-sm" id="selectPolicyJSONTemplate" disabled></select>
                            </div>    
                            <div class="ace_container" style="flex-grow: 1;">
                                <div>
                                    <div class="script_editor" id="policyEditor"></div>
                                </div>
                            </div>
                        </crud-toolbar>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>